<template>
  <view class="content">
    <div id="main-map"></div>
		
		<view class="handle" v-show="supShow">
			<view class="class_select_btn" :class="showStatus?'show_classSelect':''">
				<text v-show="proshowStatus" @click="openPopup('project')">项目</text>
				<text v-show="maishowStatus" @click="openPopup('maintain')">维护</text>
				<text v-show="peoshowStatus" @click="openPopup('people')">人员</text>
			</view>
			<view class="handle-btn margin-b-20" >
				<i class="iconfont iconliebiao" @click="changeClass"></i>
			</view>
			<view class="" v-show="supShow">
				<view class="handle-btn" @click="openPopup('search')">
					<i class="iconfont iconsousuo2"></i>
					<text class="dis-block">搜索</text>
				</view>
				<view v-if="classStatus!=='people'" class="handle-btn" @click="openPopup('screen')">
					<i class="iconfont iconshaixuan"></i>
					<text class="dis-block">筛选</text>
				</view>
				<view class="handle-btn" @click="openTip">
					<i class="iconfont iconditu"></i>
					<text class="dis-block">底图</text>
				</view>
				<view class="handle-btn" @click="openTip">
					<i class="iconfont icongengduo"></i>
					<text class="dis-block">更多</text>
				</view>
			</view>
			<view class="handle-btn margin-t-10" @click="getLocation">
				<i class="iconfont iconzhuye"></i>
			</view>
		</view>
		
		<uni-popup ref="project-popup" type="bottom" :maskClick='false'>
			<project-popup :info="projectInfo" @closePopup="closePopup"></project-popup>
		</uni-popup>
		<uni-popup ref="maintain-popup" type="bottom" >
			<maintain-popup :info="maintainInfo" @closePopup="closePopup"></maintain-popup>
		</uni-popup>
		<uni-popup ref="people-popup" type="bottom" >
			<people-popup :info="peopleInfo" @closePopup="closePopup"></people-popup>
		</uni-popup>
		<uni-popup ref="search-popup" type="bottom">
			<search-popup v-if="classStatus == 'project'" @closePopup="closePopup"></search-popup>
			<maintain-search v-else-if="classStatus == 'maintain'" @closePopup="closePopup" @rebackFromMaintain="rebackFromMaintain" :type="popStatus"></maintain-search>
			<people-search v-else @closePopup="closePopup" @openPeoplePop="openPeoplePop"></people-search>
		</uni-popup>
		<uni-popup ref="screen-popup" type="bottom" >
			<screen-popup @closePopup="closePopup"></screen-popup>
		</uni-popup>
		
		<!-- <view class="coord-bar">
			<text>经度：{{coord.lon}}，纬度：{{coord.lat}}</text>
		</view> -->
  </view>
</template>

<script>
import pgEarthBaseMap from './pgEarthBaseMap'
import projectPopup from './template/projectPopup'
import searchPopup from './template/searchPopup'
import ScreenPopup from './template/ScreenPopup'
import maintainSearch from './template/maintainSearch'
import maintainPopup from './template/maintainPopup'
import peopleSearch from './template/peopleSearch'
import peoplePopup from './template/peoplePopup'
import { aggregationList, supervisionList, getMaintainList, getPeopleList, getDistrict } from '@/common/api/map'
import { projectInfo, menu } from '@/common/api/api'

export default {
	components: {
		projectPopup,
		searchPopup,
		ScreenPopup,
		maintainPopup,
		maintainSearch,
		peopleSearch,
		peoplePopup
	},
  data() {
    return {
			supShow: false,
			classStatus: "project",
			proshowStatus: false,
			maishowStatus: false,
			peoshowStatus: false,
			popStatus: false,
			showStatus: false,
			projectInfo: {},
			projectInfoPoint: [],
			peopleInfo: {},
			maintainInfo: {},
			page: {
				pageNo: 1,
				pageSize: 10000
			},
      coord: {
				lon: '0.0000°',
				lat: '0.0000°',
			},
			projectIds: []
    };
  },
	onShow() {
		menu({device: 1}).then((res)=> {
			if(res.code == 20000){
				let data = {};
				res.data.forEach((item)=>{
					if(item.name=='监管' || item.label=='监管') data = item;
				});
				if(data.children && data.children.length > 0){
					this.supShow = true
					data.children.forEach((item)=> {
						if(item.name=='项目监管' || item.label=='项目监管') this.proshowStatus = true
						if(item.name=='维护监管' || item.label=='维护监管') this.maishowStatus = true
						if(item.name=='人员监管' || item.label=='人员监管') this.peoshowStatus = true
					})
				}
			}
		})
	},
  mounted() {
    let rootProto = this.$root.constructor.prototype;
    rootProto.$viewer = pgEarthBaseMap.initBaseMap("main-map", this);
		this.loadAggregation(1);
		this.loadAggregation(2);
		this.loadAggregation(3);
  },
  methods: {
		changeClass() {
			this.showStatus = !this.showStatus
		},
    openPopup(name) {
			if(name == "project"){
				this.classStatus = "project"
				this.loadAggregation(1);
				this.loadAggregation(2);
				this.loadAggregation(3);
				this.changeClass()
				this.getLocation()
			}else if(name == "maintain"){
				this.getMaintainLists()
				this.changeClass()
				this.reloadMap('maintain')
				this.classStatus = "maintain"
			}else if(name == "people"){
				this.reloadMap('people')
				this.changeClass()
				this.loadPeople()
				this.classStatus = "people"
			}else if(name == "screen"){
				if(this.classStatus = "maintain"){
					this.popStatus = true
					this.$refs[`search-popup`].open();
				}else{
					this.$refs[`${name}-popup`].open();
				}
			}else{
				this.popStatus = false
				this.$refs[`${name}-popup`].open();
			}
		},
		openTip() {
			uni.showToast({
				title: '功能开发中...',
				icon: 'none'
			})
		},
		closePopup(name) {
			this.$refs[`${name}-popup`].close();
		},
		loadAggregation(level) {
			aggregationList({level}).then((res)=> {
				if(res.code == 20000){
					this.$viewer.aggregation(res.data, level);
					if(level == 3) this.loadProject();
					// this.loadProject();
				}
			})
		},
		// 获取子组件传递的项目id
		getProIdChild(e){
			console.log(e)
		},
		loadProject() {
			supervisionList(this.page).then((res)=> {
				if(res.code == 20000){
					let obj = {}
					this.$viewer.removeMapPoints('people');
					if(this.classStatus == "project"){
						this.$viewer.addPointList({
							data: res.data.records,
							type: "project",
							action: (point)=> {
								this.projectInfo = point;
								this.maintainInfo = point;
								this.$refs['project-popup'].open();
							}
						})
					}else if(this.classStatus == "maintain"){
						this.projectIds.forEach(item=>{
							res.data.records.forEach(obj=>{
								if(obj.projectId == item){
									this.projectInfoPoint.push(obj)
								}
							})
							projectInfo(item).then(re=>{
								if(re.code === "20000"){
									this.projectInfoPoint.push(re.data)
								}
							})
						})
						this.projectInfoPoint = this.projectInfoPoint.reduce(function(item, next) {
							obj[next.projectId] ? '' : obj[next.projectId] = true && item.push(next);
							return item;
						}, []);
						this.$viewer.removeAggregation()
						this.$viewer.removeMapPoints();
						setTimeout(()=>{
							this.$viewer.addPointList({
								data: this.projectInfoPoint,
								type: "maintain",
								action: (point)=> {
									this.projectInfo = point;
									this.maintainInfo = point;
									this.$refs['maintain-popup'].open();
								}
							})
						},1500)
					}
				}
			})
		},
		rebackFromMaintain(point){
			this.maintainInfo = point;
			this.$refs['maintain-popup'].open();
		},
		loadPeople() {
			getPeopleList(this.page).then((res)=> {
				if(res.code == 20000){
					this.$viewer.removeMapPoints();
					this.$viewer.removeAggregation()
					this.$viewer.addPointList({
						data: res.data,
						type: "people",
						action: (point)=> {
							this.peopleInfo = point;
							this.$refs['people-popup'].open();
						}
					})
				}
			})
		},
		reloadMap(type){
			if(type == "people"){
				this.$viewer.goView({
					longitude: 110.252098,
					latitude: 30.998872,
					height: 1800000
				});
			}else{
				this.$viewer.goView({
					longitude: 110.252098,
					latitude: 30.998872,
					height: 3500000
				});
			}
		},
		getLocation() {
			this.$viewer.goView({
				longitude: 110.252098,
				latitude: 30.998872,
				height: 4500000
			});
		},
		getMaintainLists() {
			getMaintainList({...this.page}).then((res)=> {
				if(res.code == 20000){
					let projectIdList = [];
					let maintainArr = [];
					maintainArr = res.data.records;
					maintainArr.forEach(item=>{
						projectIdList.push(item.projectId)
					})
					this.projectIds = Array.from(new Set(projectIdList))
					this.loadProject()
				}else{
					uni.showToast({
						title: '暂无数据...',
						icon: 'none'
					})
				}
			})
		},
		openPeoplePop(e) {
			this.peopleInfo = e;
			this.$refs[`people-popup`].open();
		}
		
		// getDistrictData(){//请求筛选行政区的所有数据
		// 	console.log(3)
		// 	let items = [];
		// 	// uni.removeStorageSync('screenData');
		// 	getDistrict().then(res =>{
		// 		if(res.code == "20000"){
		// 			res.data.map( (item,indexP) => {
		// 				items.push(Object.assign({},{text:item.name},{value:item.code},{children:[]}));
		// 				console.log(items)
		// 				getDistrict({code:item.code}).then( citys =>{
		// 					citys.data.map((city,indexC) => {
		// 						// console.log(items);
		// 						items[indexP].children.push(Object.assign({},{text:city.name},{value:city.code},{children:[]}));
		// 						getDistrict({code:city.code}).then( areas => {
		// 							if(areas.code == "20000"){
		// 								areas.data.forEach(area => {
		// 									items[indexP].children[indexC].children.push(Object.assign({},{text:area.name},{value:area.code}));
		// 								})
		// 							}
		// 						})
		// 					})
		// 				})
		// 			})
		// 			setTimeout(()=>{
		// 				uni.setStorageSync('screenData',items);
		// 			},8000);
		// 		}
		// 	})
		// },
  },
};
</script>

<style lang="less">
.content {
  width: 100vw;
  height: 100vh;
	#main-map {
	  width: 100%;
	  height: 100%;
	}
	
	>.handle{
		position: fixed;
		top: 100rpx;
		right: 30rpx;
		width: 90rpx;
		color: #fff;
		font-size: 20rpx;
		> view{
			width: 90rpx;
			border: 1px solid #00FFFF;
			>.handle-btn{padding: 10rpx 0;}
		}
		.handle-btn{
			width: 100%;
			padding: 30rpx 0;
			text-align: center;
			background: rgba(5, 38, 102, 0.55);
		}
		.class_select_btn{
			position: absolute;
			display: flex;
			justify-content: space-around;
			width: 320rpx;
			height: 96rpx;
			line-height: 96rpx;
			transition: all .5s;
			visibility: hidden;
			opacity: 0;
			background: rgba(5, 38, 102, 0.55);
			transform: translateX(0);
			uni-text{
				display: block;
				width: 100%;
				text-align: center;
				border-right: 1px solid #00FFFF;
				&:last-child{
					border-right: none;
				}
			}
			
		}
		.show_classSelect{
			visibility: visible;
			opacity: 1;
			transform: translateX(-350rpx);
		}
	}
	
	>.coord-bar{
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		text-align: right;
		color: #fff;
		font-size: 20rpx;
	}
}


</style>
